<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>座位选择</title>
    <link href="../css/header.css" rel="stylesheet">
    <link href="../css/footer.css" rel="stylesheet">
    <link href="../css/cinema/chooseseat.css" rel="stylesheet">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--========= 1.上方导航栏 ====-->
<div class="index-header">
    <div class="header-logo"><a href="#" class="logo"></a></div>
    <div class="header-nav">
        <ul>
            <li><a href="../index.html" class="">首页</a></li>
            <li><a href="../films/films.html" class="">电影</a></li>
            <li class="checked"><a href="../cinema/detail.html" class="">影院</a></li>
            <li><a href="../border/border.html" class="">榜单</a></li>
            <li><a href="../border/address.html" class="address">地区</a></li>
        </ul>
    </div>
    <div class="header-search">
        <form action="" class="search-form">
            <input type="text" class="keyword" placeholder="电影/影院 搜你所想">
            <a href="" class="search-btn"></a>
        </form>
        <div class="head-login">
            <a href="customer/login.html" class="login-btn">&nbsp;&nbsp;&nbsp;&nbsp;登录</a>
        </div>
    </div>

</div>
<div class="head-wait"></div>
<!--中间部分-->
<div class="container">
<!--    上部时间线-->
    <div class="timeline">
        <div class="step done">
            <span class="step-num">1</span>
            <div class="firstline"></div>
            <span class="step-text">选择影片场次</span>
        </div>
        <div class="step done">
            <span class="step-num">2</span>
            <div class="secondline"></div>
            <span class="step-text">选择座位</span>
        </div>
        <div class="step">
            <span class="step-num">3</span>
            <div class="thirdline"></div>
            <span class="step-text">14分钟内付款</span>
        </div>
        <div class="step">
            <span class="step-num">4</span>
            <div class="lastline"></div>
            <span class="step-text">影院取票观影</span>
        </div>
    </div>
<!--    下部内容-->
    <div class="main">
        <div class="hall">
            <div class="seattype">
                <div class="selectable example">
                    <span>可选座位</span>
                </div>
                <div class="sold example">
                    <span>已售座位</span>
                </div>
                <div class="chosen example">
                    <span>已选座位</span>
                </div>
            </div>
            <div class="hall-main">
                <div class="screen"></div>
                <div class="box">
                    <div class="seats-row">
                        <div class="colnum">1</div>
                        <div class="colnum">2</div>
                        <div class="colnum">3</div>
                        <div class="colnum">4</div>
                        <div class="colnum">5</div>
                        <div class="colnum">6</div>
                        <div class="colnum">7</div>
                        <div class="colnum">8</div>
                    </div>
                    <div class="seats">
                        <div class="row"  data-row-id="1">
                            <div data-column-id="1" class="seat selectable"></div>
                            <div data-column-id="2" class="seat selectable"></div>
                            <div data-column-id="3" class="seat selectable"></div>
                            <div data-column-id="4" class="seat selectable"></div>
                            <div data-column-id="5" class="seat selectable"></div>
                            <div data-column-id="5" class="seat sold"></div>
                            <div data-column-id="7" class="seat sold"></div>
                            <div data-column-id="8" class="seat selectable"></div>
                            <div data-column-id="9" class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row"  data-row-id="2">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat sold"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row"  data-row-id="3">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat sold"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row" data-row-id="4">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row" data-row-id="5">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row" data-row-id="6">
                            <div data-column-id="1" class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row" data-row-id="7">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                        <div class="row" data-row-id="8">
                            <div data-column-id="1"  class="seat selectable"></div>
                            <div data-column-id="2"  class="seat selectable"></div>
                            <div data-column-id="3"  class="seat selectable"></div>
                            <div data-column-id="4"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="5"  class="seat selectable"></div>
                            <div data-column-id="7"  class="seat selectable"></div>
                            <div data-column-id="8"  class="seat selectable"></div>
                            <div data-column-id="9"  class="seat selectable"></div>
                            <div data-column-id="10" class="seat selectable"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="side">
            <div class="movie-info">
                <div class="poster">
                    <img src="../images/cinema3.jpg">
                </div>
                <div class="content">
                    <p class="name text-ellipsis">关于我妈的一切</p>
                    <div class="info-item">
                        <span>类型 :</span>
                        <span class="value">剧情,家庭</span>
                    </div>
                    <div class="info-item">
                        <span>时长 :</span>
                        <span class="value">120分钟</span>
                    </div>
                </div>
            </div>
            <div class="show-info">
                <div class="info-item">
                    <span>影院 :</span>
                    <span class="value text-ellipsis">CGV影城（苏州中心IMAX店）</span>
                </div>
                <div class="info-item">
                    <span>影厅 :</span>
                    <span class="value text-ellipsis">2厅</span>
                </div>
                <div class="info-item">
                    <span>版本 :</span>
                    <span class="value text-ellipsis">中文2D</span>
                </div>
                <div class="info-item">
                    <span>场次 :</span>
                    <span class="value text-ellipsis">今天 9月22 19:00</span>
                </div>
                <div class="info-item">
                    <span>票价 :</span>
                    <span class="value text-ellipsis">￥73/张</span>
                </div>
            </div>
            <div class="ticket-info">
                <div class="has-ticket" style="">
                    <span class="text">座位：</span>
                    <div class="ticket-container">
                    </div>
                </div>

                <div class="total-price">
                    <span>总价 :</span>
                    <span class="price">33</span>
                </div>
            </div>
            <div></div>
        </div>
    </div>
</div>

<!--!&#45;&#45;========== 4.底部脚注 =============&ndash;&gt;-->
<div class="index-footer">
    <div class="footer-head"></div>
    <div class="footer-main">
        <p>关于视享票票通：&nbsp;<a>关于我们</a><span>&nbsp;|&nbsp;</span><a>管理团队</a><span>&nbsp;|&nbsp;</span><a>投资者关系</a>
            &nbsp;&nbsp;友情链接 :&nbsp;&nbsp;<a>支付宝</a></p>
        <p>
            商务合作邮箱：1137750012@qq.com &nbsp;
            客服电话：62170010 &nbsp;
            违法和不良信息/涉未成年人有害信息举报电话：4006018900
        </p>
        <p>
            用户举报/涉未成年人有害信息举报邮箱：tousujubao@shixiang.com&nbsp;
            舞弊线索举报邮箱：wubijubao@shixiang.com
        </p>
        <p>视享票票通用户服务协议<span>&nbsp;|&nbsp;</span>使用手册<span>&nbsp;|&nbsp;</span>隐私政策</p>
        <p>驰星视享文化传媒有限公司</p>
        <p>&nbsp;2021&nbsp;视享票票通&nbsp;shixiang.com</p>
    </div>
</div>
<script src="../js/cinema/chooseseat.js"></script>
</body>
</html>